import React from 'react'
//import reactdom from 'react-dom'
import {withRouter} from 'react-router-dom'
import { Layout, Menu, Breadcrumb,Button } from 'antd';
import '../style/home.css'
//import {adminRoutes}from '../router/routers'
import {
  BarsOutlined,
  ShrinkOutlined,
  BankOutlined,
  FileOutlined,
  TeamOutlined,
  AlignLeftOutlined,
  OrderedListOutlined,
  UnorderedListOutlined,
  AudioOutlined,
  CameraOutlined,
  ContactsOutlined,
  UsergroupAddOutlined
} from '@ant-design/icons';
//import Login from './login'
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
 class Home extends React.Component{
    constructor(props){
        super(props)
        this.state={
            id:this.props.id,
           c:['c','b'],
           collapsed: false,
        }
    }
    onCollapse = collapsed => {
      this.setState({ collapsed });
    };
  
  //  componentDidMount(){
  //      fetch('https://dbyxs.xyz:8002/goods',{method:'post',}).then(res=>{
  //          return res.json()
  //      }).then(res=>{
  //          console.log(res)
  //      })
  //  }
   to=(e)=>{
    // e.preventDefault();
    //  this.props.history.push('/admin')
     
   }
   onOpenChange=(openKeys)=>{
   // console.log(openKeys)
    if(openKeys.length===1||openKeys.length===0){
      this.setState({
        openKeys
      })
      return
    }
    const latestopenkey=openKeys[openKeys.length-1]
    if(latestopenkey.includes(openKeys[0])){
      this.setState({
        openKeys
      })
    }else{
      this.setState({
        openKeys:[latestopenkey]
      })
    }
  }
   getOut=()=>{
     sessionStorage.clear()
     //this.props.location.href='/login#/'
     this.props.history.push('/login')
    this.props.history.go();
   }
    render(){
    //  console.log(1,this.props)
      const {openKeys}=this.state
        return(
          <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
            <div className="logo" />
            <div style={{color:'#fff',backgroundColor:'#002140', height:'64px',lineHeight:'60px',fontSize:'18px',fontWeight:600,textAlign:'center'}}>美心宝</div>
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" onClick={this.getto} openKeys={openKeys} onOpenChange={this.onOpenChange}>
            <Menu.Item key="1"  onClick={p=>this.props.history.push('/echarts')} icon={<BankOutlined />}>
                首页
              </Menu.Item>
              <SubMenu key="sub1" icon={<AlignLeftOutlined />} title="商品管理">
                <Menu.Item key="3" onClick={p=>this.props.history.push('/admin')} icon={<BarsOutlined />}>商品列表</Menu.Item>
                <Menu.Item key="4"  onClick={p1=>this.props.history.replace('/detail')} icon={<ShrinkOutlined />}>添加商品</Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" icon={<OrderedListOutlined />} title="订单管理">
                <Menu.Item key="6" onClick={p=>this.props.history.push('/order')} icon={<OrderedListOutlined />}>订单列表</Menu.Item>
                <Menu.Item key="8" onClick={p=>this.props.history.push('/orderlist')} icon={<UnorderedListOutlined />}>审核订单</Menu.Item>
              </SubMenu>
              <SubMenu key="sub3" icon={<TeamOutlined />} title="人员管理">
                <Menu.Item key="9" onClick={p=>this.props.history.push('/user')} icon={<UsergroupAddOutlined />}>会员列表</Menu.Item>
                <Menu.Item key="10" onClick={p=>this.props.history.push('/useraudio')} icon={<AudioOutlined />}>个人语音</Menu.Item>
                <Menu.Item key="11" onClick={p=>this.props.history.push('/uservideo')} icon={<CameraOutlined />}>个人视频</Menu.Item>
                <Menu.Item key="12" onClick={p=>this.props.history.push('/userfile')} icon={<ContactsOutlined />}>个人文件</Menu.Item>
              </SubMenu>
              <Menu.Item key="20" icon={<FileOutlined />} />
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ backgroundColor:'#002140', padding: 0 ,color:'#fff',display:"flex",flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}} >
            <Button type="primary" style={{marginRight:20}} onClick={this.getOut}>退出</Button>
            </Header>
            <Content style={{ margin: '0 16px',height:'100%' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                {/* <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item> */}
              </Breadcrumb>
              <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              {this.props.children}
              {/* <Route path='/admin'/> */}
              </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>美心宝 ©2018  </Footer>
          </Layout>
        </Layout>
        )
    }
}

export default withRouter(Home)